<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>大数据平台</title>
    <link rel="stylesheet" href="./assets/css/reset.css" />
  </head>
  <body>
    <!-- <div class="test"></div> -->
    <!-- 头 -->
    <header>
      <h1>大数据平台</h1>
      <span>2022年3月22日16时30分5秒</span>
    </header>
    <!-- 头 -->

    <!-- 内容 -->
    <section class="main">
      <div class="column">
        <div class="box box1" style="height: 4rem"></div>
        <div class="box box2" style="height: 2.6rem">
          <div class="titleStyle">标题样式</div>
          <div class="title">
            <span>单号</span>
            <span>金额</span>
            <span>品名</span>
            <span>时间</span>
          </div>
          <div class="out">
            <div class="move">
              <ul>
                <li>
                  <p>
                    <span>100021415</span>
                    <span>199</span>
                    <span>手机</span>
                    <span>18小时</span>
                  </p>
                </li>
                <li>
                  <p>
                    <span>100021415</span>
                    <span>199</span>
                    <span>手机</span>
                    <span>18小时</span>
                  </p>
                </li>
                <li>
                  <p>
                    <span>100021415</span>
                    <span>199</span>
                    <span>手机</span>
                    <span>18小时</span>
                  </p>
                </li>
                <li>
                  <p>
                    <span>100021415</span>
                    <span>199</span>
                    <span>手机</span>
                    <span>18小时</span>
                  </p>
                </li>
                <li>
                  <p>
                    <span>100021415</span>
                    <span>199</span>
                    <span>手机</span>
                    <span>18小时</span>
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="box box3" style="height: 2.6rem"></div>
      </div>
      <div class="column">
        <div class="box box4" style="height: 2.3rem"></div>
        <div class="box box5" style="height: 3.5rem"></div>
        <div class="box box6" style="height: 3.4rem"></div>
      </div>
      <div class="column">
        <div class="box box7" style="height: 3rem">
          <h3>标题样式</h3>
          <table class="table1" style="width: 100%">
            <thead>
              <tr>
                <th>排名</th>
                <th>公司</th>
                <th>数量</th>
                <th>增长率</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>腾讯科技</td>
                <td>114万</td>
                <td>100%</td>
              </tr>
              <tr>
                <td>2</td>
                <td>百度公司</td>
                <td>923823万</td>
                <td>12%</td>
              </tr>
              <tr>
                <td>3</td>
                <td>新浪</td>
                <td>11240253万</td>
                <td>12%</td>
              </tr>
              <tr>
                <td>4</td>
                <td>网易</td>
                <td>1.2亿</td>
                <td>39%</td>
              </tr>
              <tr>
                <td>5</td>
                <td>雅虎</td>
                <td>13423万</td>
                <td>9%</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="box box8" style="height: 3rem">
          <h3>标题样式</h3>
          <table class="table2" style="width: 100%">
            <thead>
              <tr>
                <th>排名</th>
                <th>公司</th>
                <th>数量</th>
                <th>增长率</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>腾讯科技</td>
                <td>114万</td>
                <td>100%</td>
              </tr>
              <tr>
                <td>2</td>
                <td>百度公司</td>
                <td>923823万</td>
                <td>12%</td>
              </tr>
              <tr>
                <td>3</td>
                <td>新浪</td>
                <td>11240253万</td>
                <td>12%</td>
              </tr>
              <tr>
                <td>4</td>
                <td>网易</td>
                <td>1.2亿</td>
                <td>39%</td>
              </tr>
              <tr>
                <td>5</td>
                <td>雅虎</td>
                <td>13423万</td>
                <td>9%</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="box box9" style="height: 3.2rem"></div>
      </div>
    </section>
    <!-- 内容 -->
    <script src="./assets/js/flexible.js"></script>
    <script src="http://unpkg.com/jquery"></script>
    <script src="https://unpkg.com/webopenfather-date@1.0.1/dist/wofDate.js"></script>
    <script src="http://unpkg.com/echarts"></script>
    <script src="./assets/js/left1.js"></script>
    <script src="./assets/js/left2.js"></script>
    <script src="./assets/js/left3.js"></script>
    <script src="./assets/js/main1.js"></script>
    <script src="./assets/js/main2.js"></script>
    <script src="./assets/js/main3.js"></script>
    <script src="./assets/js/right1.js"></script>
    <script src="./assets/js/right2.js"></script>
    <script src="./assets/js/right3.js"></script>
    <script>
      setInterval(() => {
        $("header span").html(wofDate.format("Y年m月d日H时i分s秒"));
      }, 1000);
    </script>
  </body>
</html>
